import React, { useRef, useState } from 'react'
import { Button, DatePicker, message, Space, Table } from 'antd'
import ProTable from '@ant-design/pro-table'
import SelectFixed from '@/pages/Exam/TestList/componets/SelectFixed'
import { TestListMod } from '@/services/testList'

const { RangePicker } = DatePicker

const Fixed = (props) => {

  const {
    selectOrder,
    setTestListId,
    testListId,
    setIsCreateModalVisible,
    actionRef: createdRef,
  } = props

  const [isModalVisible, setIsModalVisible] = useState(false)

  const [tableListDataSource, setTableListDataSource] = useState([])

  const [selectedRowKeys, setSelectedRowKeys] = useState([])

  const actionRef = useRef()

  const showModal = () => {
    setIsModalVisible(true)
  }

  const handleCreate = () => {

    if (selectedRowKeys.length) {
      let response = ''

      if (testListId !== undefined) {
        response = TestListMod(testListId, { 'fixed': selectedRowKeys })
        message.success('添加成功')
        createdRef.current?.reload()
        setIsCreateModalVisible(false)
      }
    } else {
      message.error('请先添加题目')
    }
  }

  const columns = [
    {
      title: 'ID',
      width: '10%',
      dataIndex: 'id',
      align: 'center',
    },
    {
      title: '题型',
      width: '15%',
      dataIndex: 'type',
      align: 'center',
    },
    {
      title: '题干',
      dataIndex: 'content',
      align: 'left',
    },
    {
      title: '分类',
      width: '15%',
      align: 'center',
      dataIndex: 'category',
      render: (_, record) => {
        return record.category.name
      },
    },
    {
      title: '操作',
      align: 'center',
      render: (_, record) => [
        <Button type="primary" size="small" key="delete" onClick={async () => {
          let newSource = tableListDataSource.filter(item => {
            return item.id !== record.id
          })
          setSelectedRowKeys(selectedRowKeys.filter(item => item !== record.id))
          setTableListDataSource(newSource)
          message.success('删除成功')
          actionRef.current?.reload()
        }} danger>
          删除
        </Button>,
      ],
    },
  ]

  return (
    <>
      <Button type={'primary'} onClick={() => showModal()}>添加固定题目</Button>
      <ProTable
        style={{ marginTop: 28 }}
        columns={columns}
        actionRef={actionRef}
        rowSelection={{
          selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
        }}
        tableAlertRender={({
          selectedRowKeys,
          selectedRows,
          onCleanSelected,
        }) => (<Space size={24}>
          <span>
            已选 {selectedRowKeys.length} 项
            <a style={{ marginLeft: 8 }} onClick={onCleanSelected}>
              取消选择
            </a>
          </span>
        </Space>)}
        tableAlertOptionRender={() => {
          return (<Space size={16}>
            <a>批量删除</a>
          </Space>)
        }}
        request={() => {
          return {
            data: tableListDataSource,
            success: true,
          }
        }}
        scroll={{ x: 1300 }}
        options={false}
        search={false}
        rowKey="id"
        headerTitle="固定题目操作"
        footer={
          () => [
            <Button key="add" onClick={handleCreate}>保存</Button>,
          ]
        }
      />

      {/* 固定题目的模态框 */}
      <SelectFixed
        setIsModalVisible={setIsModalVisible}
        isModalVisible={isModalVisible}
        setTableListDataSource={setTableListDataSource}
        tableListDataSource={tableListDataSource}
        actionRef={actionRef}
        selectOrder={selectOrder}
        selectedRowKeys={selectedRowKeys}
        setSelectedRowKeys={setSelectedRowKeys}
      />
    </>
  )
}

export default Fixed

